﻿@using WXY.Course.Model;
@{
    ViewBag.Title = "Index";
    var moduleList = ViewData["ModuleList"] as IList<ModuleInfo>;
    var notice = ViewData["Notice"] as NoticeInfo;
    var recommendList = ViewData["RecommendList"] as IList<RecommendInfo>;
    var recommendedResource = ViewData["RecommendedResource"] as ResourceInfo;
    var leader = ViewData["LeaderInfo"] as LeaderInfo;
}
@section Header{
    <script src="~/Scripts/jquery.picscrool.js"></script>
}
<div class="container-left fl">
    <div class="notice">
        <h3 class="title">通知公告</h3>
        <p class="content">
            @if (notice != null)
            {
                @notice.Content
            }
        </p>
    </div>
    <div class="warpper-show">
        <div id="focus">
            <ul>
                @if (recommendList != null)
                {
                    foreach (var item in recommendList.Where(m => m.Position == RecommendPosition.IndexTop))
                    {
                        <li>
                            <a href="@(string.IsNullOrEmpty(item.Url)?"javascript:;":item.Url)">
                                <img src="@item.Image" alt="@item.Name" />
                            </a>
                        </li>
                    }
                }
            </ul>
        </div><!--focus end-->
    </div>
    <div class="clear"></div>
    <div class="panel">
        @if (recommendedResource != null)
        {
            <h3 class="title">@Html.ActionLink(recommendedResource.ModuleInfo.Name, "List", "Resource", new { moduleId = recommendedResource.ModuleInfo.Code }, null) > @recommendedResource.Title</h3>
            <p class="content">@Html.CutStrInDBCCase(Html.RemoveHtmlTag(recommendedResource.Content), 300, "...")</p>
            <p>
                @Html.ActionLink("查看更多 »", "Detail", "Resource", new { Id = recommendedResource.Code }, new { @class = "btn ml1em" })
            </p>
        }
    </div>
    <div class="panel">
        <h3 class="title">精品展示</h3>
        <div class="infiniteCarousel">
            <div class="wrapper">
                <ul>
                    @if (recommendList != null)
                    {
                        foreach (var item in recommendList.Where(m => m.Position == RecommendPosition.IndexBottom))
                        {
                            <li>
                                <img alt="@item.Name" src="@item.Image">
                            </li>
                        }
                    }
                    @*<li>
                            <img alt="手机动画" src="http://www.klingde.com/images/show/phone.jpg">
                        </li>
                        <li>
                            <img alt="手机动画" src="http://www.klingde.com/images/show/phone.jpg">
                        </li>
                        <li>
                            <img alt="豹子角色动画" src="http://www.klingde.com/images/show/leopard.jpg">
                        </li>
                        <li>
                            <img alt="颜色渐变三角形" src="http://www.klingde.com/images/show/ColorGradientTriangle.jpg">
                        </li>
                        <li>
                            <img alt="交叉条" src="http://www.klingde.com/images/show/Xbracing.jpg">
                        </li>
                        <li>
                            <img alt="颜色渐变正八面体" src="http://www.klingde.com/images/show/ColorGradientOctagonal.jpg">
                        </li>
                        <li>
                            <img alt="贴图立方体" src="http://www.klingde.com/images/show/MapCube.jpg">
                        </li>
                        <li>
                            <img alt="分形树" src="http://www.klingde.com/images/show/FractalTree.jpg">
                        </li>
                        <li>
                            <img alt="单光源Gouraud模型" src="http://www.klingde.com/images/show/IlluminationBall.jpg">
                        </li>
                        <li>
                            <img alt="海绵实体模型" src="http://www.klingde.com/images/show/Sponge.jpg">
                        </li>
                        <li>
                            <img alt="光照圆环" src="http://www.klingde.com/images/show/Circle.jpg">
                        </li>
                        <li>
                            <img alt="交叉透明玻璃" src="http://www.klingde.com/images/show/TransparentGlass.jpg">
                        </li>
                        <li>
                            <img alt="三维五角星" src="http://www.klingde.com/images/show/3DFiveStar.jpg">
                        </li>
                        <li>
                            <img alt="钻石" src="http://www.klingde.com/images/show/Jewel.jpg">
                        </li>
                        <li>
                            <img alt="双光源Phong金属球" src="http://www.klingde.com/images/show/DoubleLightMetalBall.jpg">
                        </li>
                        <li>
                            <img alt="棋盘纹理贴图球" src="http://www.klingde.com/images/show/ChessBoardMapping.jpg">
                        </li>
                        <li>
                            <img alt="光照立方体" src="http://www.klingde.com/images/show/IlluminationCube.jpg">
                        </li>
                        <li>
                            <img alt="月球" src="http://www.klingde.com/images/show/Moon.jpg">
                        </li>
                        <li>
                            <img alt="反走样线框球" src="http://www.klingde.com/images/show/Anti-aliasingBall.jpg">
                        </li>
                        <li>
                            <img alt="三维地球" src="http://www.klingde.com/images/show/3DEarth.jpg">
                        </li>
                        <li>
                            <img alt="光照茶壶" src="http://www.klingde.com/images/show/Illuminationeapot.jpg">
                        </li>
                        <li>
                            <img alt="茶壶贴图" src="http://www.klingde.com/images/show/TeapotMap.jpg">
                        </li>
                        <li>
                            <img alt="三维地形" src="http://www.klingde.com/images/show/dixing.jpg">
                        </li>
                        <li>
                            <img alt="光晕、水效果的三维地形" src="http://www.klingde.com/images/show/HaloWater.jpg">
                        </li>
                        <li>
                            <img alt="圆柱纹理贴图" src="http://www.klingde.com/images/show/CylindricalTexture.jpg">
                        </li>
                        <li>
                            <img alt="圆锥纹理贴图" src="http://www.klingde.com/images/show/ConeTexture.jpg">
                        </li>*@
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container-r fl">
    <div class="jianjie">
        <h3 class="title">负责人简介</h3>
        @if (leader != null)
        {
            <p class="tx"><img src="@leader.Image" alt="@leader.Name" /></p>
            <ul class="info">
                <li>姓名：@leader.Name</li>
                @foreach (var item in leader.MainArchives)
                {
                    <li>@item.Key：@item.Value</li>
                }
            </ul>
            <ul class="chengguo js_cg">
                @{
                int i = 0;
                foreach (var item in leader.Contributions)
                {
                    <li><a class="xqbtn" href="javascript:;">@item.Key</a></li>
                    if (i++ == 0)
                    {
                        <li class="xq">
                            @Html.Raw(item.Value)
                        </li>
                    }
                    else
                    {
                        <li style="display:none" class="xq">
                            @Html.Raw(item.Value)
                        </li>
                    }
                }
                }
                @*<li><a class="xqbtn" href="javascript:;">教学成果</a></li>
                    <li style="display:none;" class="xq">
                        <p>1.编著《计算机图形学基础教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学实践教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)习题解答与编程实践》,清华大学出版社,2010年2月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学实践教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)习题解答与编程实践》,清华大学出版社,2010年2月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学实践教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)习题解答与编程实践》,清华大学出版社,2010年2月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学实践教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)习题解答与编程实践》,清华大学出版社,2010年2月。</p>
                    </li>
                    <li><a class="xqbtn" href="javascript:;">联系方式</a></li>
                    <li style="display:none;" class="xq">
                        <p>1.编著《计算机图形学基础教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学实践教程(Visual C++版)》,清华大学出版社,2008年4月。</p>
                        <p>1.编著《计算机图形学基础教程(Visual C++版)习题解答与编程实践》,清华大学出版社,2010年2月。</p>
                    </li>*@
            </ul>
        }
    </div>
</div>
@section Footer{
    <script type="text/javascript">
        (function () {
            $.fn.infiniteCarousel = function () {
                function repeat(str, n) {
                    return new Array(n + 1).join(str);
                }

                return this.each(function () {
                    // magic!
                    var $wrapper = $('> div', this).css('overflow', 'hidden'),
                        $slider = $wrapper.find('> ul').width(9999),
                        $items = $slider.find('> li'),
                        $single = $items.filter(':first')

                    singleWidth = $single.outerWidth(),
                    visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                    currentPage = 1,
                    pages = Math.ceil($items.length / visible);

                    /* TASKS */

                    // 1. pad the pages with empty element if required
                    if ($items.length % visible != 0) {
                        // pad
                        $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                        $items = $slider.find('> li');
                    }

                    // 2. create the carousel padding on left and right (cloned)
                    $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
                    $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
                    $items = $slider.find('> li');

                    // 3. reset scroll
                    $wrapper.scrollLeft(singleWidth * visible);

                    // 4. paging function
                    function gotoPage(page) {
                        var dir = page < currentPage ? -1 : 1,
                            n = Math.abs(currentPage - page),
                            left = singleWidth * dir * visible * n;

                        $wrapper.filter(':not(:animated)').animate({
                            scrollLeft: '+=' + left
                        }, 500, function () {
                            // if page == last page - then reset position
                            if (page > pages) {
                                $wrapper.scrollLeft(singleWidth * visible);
                                page = 1;
                            } else if (page == 0) {
                                page = pages;
                                $wrapper.scrollLeft(singleWidth * visible * pages);
                            }

                            currentPage = page;
                        });
                    }

                    // 5. insert the back and forward link
                    $wrapper.append('<a class="arrow back"></a><a class="arrow forward"></a>');

                    // 6. bind the back and forward links
                    $('a.back', this).click(function () {
                        gotoPage(currentPage - 1);
                        return false;
                    });

                    $('a.forward', this).click(function () {
                        gotoPage(currentPage + 1);
                        return false;
                    });

                    $(this).bind('goto', function (event, page) {
                        gotoPage(page);
                    });

                    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
                    $(this).bind('next', function () {
                        gotoPage(currentPage + 1);
                    });
                });
            };
        })(jQuery);

        $(document).ready(function () {
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            var autoscrolling = true;

            $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
                autoscrolling = false;
            }).mouseout(function () {
                autoscrolling = true;
            });

            setInterval(function () {
                if (autoscrolling) {
                    $('.infiniteCarousel').trigger('next');
                }
            }, 2000);
        });

        $(function () {
            $(".js_cg li a.xqbtn").click(function () {
                var $this = $(this).parent("li").next("li.xq");
                $("li.xq").not($this[0]).slideUp(600);
                $this.slideToggle(600);
            });

        })
    </script>
}